/**
 * 匠言知识付费v2.0.0
 * Author: 山西匠言网络科技有限公司
 * 这不是一个免费软件，它受限于许可条款，你可以访问https://www.zsfzxkc.cn/获取更多详细信息。
 * This is not a free software, it under the license terms, you can visit https://www.zsffzxkc.cn/ get more details.
 */
<template>
	<view class="container">
		<jy-quick-btns></jy-quick-btns>
		<!-- 商品详情 -->
		<!-- <view class="spxq">
			<text>商品详情</text>
		</view> -->
		
		<!-- 背景图片 -->
		<view class="img">
			<swiper :indicator-dots="true" :autoplay="true" :interval="2000" :duration="5000" :circular="true">
				<swiper-item v-for="(item, index) in adImgs" :key="index">
					<image :src="item" mode="aspectFit"></image>
				</swiper-item>
			</swiper>
		</view>
		
		
		<!-- 商品价格   commodity=商品 -->
		<view class="commodity" :model="commodityInfo">
			<view class="commodity-price">
				<view class="commodity-price-left">
					<text>￥{{commodityInfo.price}}</text>
					<text>￥{{commodityInfo.oldprice}}</text>
				</view>
				<button class="commodity-price-right" open-type="share" @click="shareBtn">
					<image src="../../../static/liwu.png" mode="aspectFit"></image>
					<text>分享有奖</text>
				</button>
			</view>
			<text class="commodity-info">{{commodityInfo.name}}</text>
			<view class="commodity-express">
				<text class="commodity-express-left">快递<text>￥{{commodityInfo.yf}}</text></text>
				<text class="commodity-express-center"></text>
				<text class="commodity-express-right">销量<text>{{commodityInfo.sales}}件</text></text>
			</view>
<!-- 			<view class="commodity-guige">
				<text>规格</text>
				<text>请选择产品规格</text>
			</view> -->
			<view class="commodity-serve">
				<text>服务</text>
				<view class="commodity-serve-kf">
					<view class="item">
						<image src="../../../static/anquan.png" mode="aspectFit"></image>
						<text>正品保障</text>
					</view>
					<view class="item">
						<image src="../../../static/tui.png" mode="aspectFit"></image>
						<text>七天无理由退货</text>
					</view>
					<view class="item">
						<image src="../../../static/shouhou.png" mode="aspectFit"></image>
						<text>售后无忧</text>
					</view>
				</view>
			</view>
			<view class="pintuan" v-if="action=='pintuan' ">
				<view class="pintuan-top">{{pintuaninfo.people}}人团</view>
				<view class="pintuan-center">
					<image :src="item.avatar" mode="aspectFit" v-for="(item,index) in buyers" :key="index"></image>
					<image class="placeholder" src="../../../static/wenhao.png" mode="aspectFit" v-for="(item,index) in (pintuaninfo.people-buyers_total)" :key="index"></image>
				</view>
				<view class="pintuan-minge">仅剩{{pintuaninfo.people-buyers_total}}个名额，<uni-countdown color="#FFFFFF" background-color="#333" :day="pt_days" :hour="pt_hour" :minute="pt_minute" :second="pt_second"></uni-countdown>后结束</view>
				<view class="pintuan-bottom">
					<button type="default">邀请好友参加拼团</button>
				</view>
				<view class="pintuan-notice">
					<text>拼团须知</text>
					<text>好友拼单，人满发货，人不满退款</text>
				</view>
			</view>
		</view>
		
		
		<!-- 图片信息 -->
		<view class="img-info">
			<jyf-parser :html="commodityInfo.introduce" ></jyf-parser>
		</view>
		
		
		
		<!-- 加入购物车 立即购买 -->
		<view class="ljgm">
			<!--  #ifdef  MP -->
			<button class="kefu" open-type="contact">
				<image src="../../../static/kefu.png" mode="aspectFit"></image>
				<text>客服</text>
			</button>
			<!--  #endif -->
			<button class="fenxiang" open-type="share" @click="shareBtn">
				<image src="../../../static/fenxiang1.png" mode="aspectFit"></image>
				<text>分享</text>
			</button>
			<button class="shoucang"  @click="dingyue">
				<image src="../../../static/shoucang.png" mode="aspectFit"></image>
				<text v-if="!is_dingyue">收藏</text>
				<text v-if="is_dingyue">已收藏</text>
			</button>
			<view class="jrgwc" v-if="action=='' ">
				<view class="gouwuche" @click="goShoppingTrolley(commodityInfo.id)">
					<text>加入购物车</text>
				</view>
				<view class="goumai" @click="goConfirmOrder(commodityInfo.id)">
					<text>立即购买</text>
				</view>
			</view>
			<view class="jrgwc" v-if="action=='credit' ">
				<view class="gouwuche" >
					<text style="font-size: 22upx;">{{creditinfo.credit}}积分+¥{{creditinfo.price}}</text>
				</view>
				<view class="goumai" @click="exchange(commodityInfo.id)">
					<text>立即兑换</text>
				</view>
			</view>
			<view class="jrgwc" v-if="action=='seckill' ">
				<view class="gouwuche" >
					<text style="font-size: 28upx;">秒杀价 ￥{{seckillinfo.price}}</text>
				</view>
				<view class="goumai" @click="seckill(commodityInfo.id)">
					<text>立即秒杀</text>
				</view>
			</view>
			<view class="jrgwc" v-if="action=='pintuan' ">
				<view class="gouwuche" @click="goShoppingTrolley(commodityInfo.id)">
					<text>单独购买</text>
				</view>
				<view class="goumai" @click="pintuan(commodityInfo.id)">
					<text>发起拼团</text>
				</view>
			</view>
		</view>
		
		
		<view class="pup" v-if="openpopup == true" :model="commodityInfo">
			<view class="popup">
				<view class="allcommodity">
					<text>购买商品</text>
					<image @click.stop="closePopup" src="../../../static/cuowu.png" mode="aspectFit"></image>
				</view>
				<view scroll-y="true" class="commoditylist">
					<view class="commoditylist-item">
						<view class="item-left">
							<image :src="commodityInfo.main_thumb" mode="aspectFit"></image>
							<!-- <view class="paiming">{{index + 1}}</view> -->
						</view>
						<view class="item-right">
							<text>{{commodityInfo.name}}</text>
							<view class="goumai">
								<text>￥{{commodityInfo.price}}</text>
								<!-- <text>立即购买</text> -->
							</view>
						</view>
					</view>
				</view>
				<view class="guige">
					<text>规格</text>
					<text>请选择产品规格</text>
				</view>
				<view class="shuliang">
					<view class="shuliang-left">
						<text>数量</text>
					</view>
					<view class="shuliang-right">
						<text @click="addCount(-1)">-</text>
						<text>{{mallCount}}</text>
						<text @click="addCount(1)">+</text>
					</view>
				</view>
				<view class="comfirm">
					<button type="default" @click="goConfirmOrder(commodityInfo.id)">确认</button>
				</view>
			</view>
		</view>
		<view class="share_img" v-if="share_img_show" @click="close_h5_share">
			<image src="../../../static/h5_share.png" mode=""></image>
		</view>
		
		
		
	</view>
</template>

<script>
	import jyfParser from "@/components/jyf-parser/jyf-parser";
	import {postDataDetail} from '@/request/shopping.js'
	import uniCountdown from '@/components/uni-countdown/uni-countdown.vue'
	export default {
		components:{
			jyfParser,
			uniCountdown,
		},
		data() {
			return {
				HOST_URL:uni.HOST_URL,
				commodityInfo: {},
				adImgs: [],
				shop_trolleys: [],
				creditinfo:{},
				action:'',
				seckillinfo:{},
				pintuaninfo:{},
				is_dingyue: false,
				openpopup: false, // 打开弹出层
				mallCount: 1 ,// 商品数量
				pt_days:0,
				pt_hour:0,
				pt_minute:0,
				pt_second:0,
				buyers:{},
				buyers_total:0,
				userinfo: {},
				share_img_show: false
			};
		},
		onShareTimeline(){
			let path = getCurrentPages()
			let path_share = path[0].$page.fullPath
			let path_title = path[0].data.title
			let userinfo = uni.getStorageSync('userinfo')
			let base_set = uni.getStorageSync('base_set')
			var pid;
			if (userinfo.uid == '' || !userinfo.uid) {
				pid = userinfo.uid
			}else{
				pid = 0
			}
			return {
			  title: this.commodityInfo.name?this.commodityInfo.name:base_set.title,
			  query: 'pid='+pid,
			  imageUrl: this.commodityInfo.main_thumb
			}
		},
		onShareAppMessage(res) {
			// #ifdef MP
			uni.showShareMenu({
			  withShareTicket: true,
			  menus: ['shareAppMessage', 'shareTimeline']
			})
			let path = getCurrentPages()
			let path_share = path[0].$page.fullPath
			let path_title = path[0].data.title
			let userinfo = uni.getStorageSync('userinfo')
			let base_set = uni.getStorageSync('base_set')
			if (userinfo.uid == '' || !userinfo.uid) {
				uni.navigateTo({
					url: '../login/login'
				})
				return {
					title: '请先登录后再分享给好友',
					path: ''
				}
			} else {
				if (res.from === 'button') {
		
				}
				return {
					title: this.commodityInfo.name?this.commodityInfo.name:base_set.title,
					path: `${path_share}?pid=${userinfo.uid}`,
					imageUrl:this.commodityInfo.main_thumb
				}
			}
			// #endif
		},
		onLoad(option) {
			
			postDataDetail({id: option.id}).then(res => {
				// console.log(res.data)
				this.commodityInfo = res.data.data
				this.is_dingyue=res.data.data.is_dingyue==1?true:false
				this.adImgs = res.data.data.thumb
				// #ifdef H5
				const HOST_URL=this.HOST_URL
				var menuinfo=res.data.data
				var userinfo=uni.getStorageSync('userinfo')
				if(userinfo && userinfo.uid){
					this.userinfo = userinfo
					var link=window.location.href+'&pid='+userinfo.uid
				}else{
					var link=window.location.href
				}
				if (this.$jwx && this.$jwx.isWechat()) {
					this.$jwx.share({
						'title': menuinfo.name,
						'desc': '￥'+menuinfo.price,
						'link': link,
						'img_url': menuinfo.main_thumb,
					})
					this.$jwx.sharepyq({
						'title': menuinfo.name,
						'link': link,
						'img_url': menuinfo.main_thumb,
					})
				}
				// #endif
			})
			if(option.action){
				this.action=option.action
				if(option.action=='credit'){
					this.get_creditinfo(option.id,'mall')
				}else if(option.action=='seckill'){
					this.get_seckillinfo(option.id,'mall')
				}else if(option.action=='pintuan'){
					this.get_pintuaninfo(option.id,'mall')
					this.get_joinptinfo(option.id,'mall')
				}
			}
		},
		methods: {
			close_h5_share (){
				this.share_img_show = false
			},
			shareBtn (){
				// #ifdef H5
					this.share_img_show = true
				// #endif
				// #ifdef APP-PLUS
					uni.showToast({
						title:'请用H5、小程序版本进行分享',
						icon:'none'
					})
				// #endif
			},
			formatSecToStr(seconds){
				let daySec = 24 *  60 * 60;
				let hourSec=  60 * 60;
				let minuteSec=60;
				let dd = Math.floor(seconds / daySec);
				let hh = Math.floor((seconds % daySec) / hourSec);
				let mm = Math.floor((seconds % hourSec) / minuteSec);
				let ss=seconds%minuteSec;
				if(dd > 0){
				this.pt_days=dd
				}
				if(hh > 0){
				this.pt_hour=hh
				}
				if (mm > 0){
				this.pt_minute=mm
				}
				if(ss>0){
				this.pt_second=ss
				}
			},
			// 收藏/订阅
			dingyue(){
				const BASE_URL = uni.BASE_URL
				var userinfo=uni.getStorageSync('userinfo')
				if(userinfo && userinfo.uid){
					this.userinfo = userinfo
				}
				else{
					uni.navigateTo({
						url: `/pages/login/login`,
					})
					return false
				}
				console.log(this.userinfo)
				uni.request({
					url: BASE_URL+'index/courses/dingyue',
					method:'POST',
					data:{
						uid:this.userinfo.uid?this.userinfo.uid:'',
						goodstype:'mall',
						menuid:this.commodityInfo.id
					},
					success:(res) =>{
						console.log(res.data);
						this.is_dingyue=res.data.data==1?true:false
					},
					fail:(res)=> {
						console.log(res.data);
					}
				});
			},
			get_seckillinfo(id,goodstype){
				const BASE_URL = uni.BASE_URL
				uni.request({
					url: BASE_URL+'index/seckill/seckillinfo',
					data: {
						id:id,
						goodstype:goodstype
					},
					method:'POST',
					success:(res) =>{
						console.log(res.data)
						this.seckillinfo=res.data.data
					},
					fail:(res)=> {
						console.log(res.data);
					}
				});
			},
			get_pintuaninfo(id,goodstype){
				const BASE_URL = uni.BASE_URL
				uni.request({
					url: BASE_URL+'index/pintuan/pintuaninfo',
					data: {
						id:id,
						goodstype:goodstype
					},
					method:'POST',
					success:(res) =>{
						console.log(res.data)
						this.pintuaninfo=res.data.data
						var date = new Date()
						var nowtime = Date.parse(date)
						var endtime=res.data.data.endtime
						if(endtime*1000>nowtime){
							var seconds=Math.floor(endtime-(nowtime/1000))
							this.formatSecToStr(seconds)
						}
					},
					fail:(res)=> {
						console.log(res.data);
					}
				});
			},
			get_joinptinfo(id,goodstype){
				const BASE_URL = uni.BASE_URL
				uni.request({
					url: BASE_URL+'index/pintuan/join_ptinfo',
					data: {
						id:id,
						goodstype:goodstype
					},
					method:'POST',
					success:(res) =>{
						console.log(res.data)
						this.buyers=res.data.data
						this.buyers_total=res.data.data.length
					},
					fail:(res)=> {
						console.log(res.data);
					}
				});
			},
			// 打开弹出层
			openPopup () {
				this.openpopup = true
			},
			// 关闭弹出层
			closePopup() {
				this.openpopup = false
			},
			// 选择购买商品的数量   加减
			addCount(e) {
				console.log(e)
				if(this.mallCount == 1 && e == -1) {
					uni.showToast({
						title: '双拼数量不能小于1'
					});
					this.mallCount = 1
				} else {
					this.mallCount = this.mallCount + e
				}
			},
			get_creditinfo(id,goodstype){
				const BASE_URL = uni.BASE_URL
				uni.request({
					url: BASE_URL+'index/credit/creditinfo',
					data: {
						id:id,
						goodstype:goodstype
					},
					method:'POST',
					success:(res) =>{
						console.log(res.data)
						this.creditinfo = res.data.data
						
						
					},
					fail:(res)=> {
						console.log(res.data);
					}
				});
			},
			goShoppingTrolley (id) {
				let gouwucheList = uni.getStorageSync('shop_trolley') || []
				this.shop_trolleys = gouwucheList
				let gouwuches = gouwucheList.find(item => item.id == this.commodityInfo.id)
				
				if(!gouwuches) {
					let newgwc = {
						id: this.commodityInfo.id,
						amount: 1,
						isChecked: true
					}
					this.shop_trolleys.push(newgwc)
					uni.showToast({
						title: '添加成功',
						duration: 1000
					})
				} else {
					uni.showToast({
						title: '该商品已在购物车内',
						duration: 1000,
						icon:'none'
					})
				}
				uni.setStorageSync('shop_trolley', this.shop_trolleys)
				
				
				setTimeout(() => {
					uni.navigateTo({
						url: `/pages/mall/shopping-trolley/shopping-trolley`
					});
				}, 1000)
			},
			goConfirmOrder(id) {
				if(this.userinfo == {}){
					uni.navigateTo({
						url: `/pages/login/login`,
					})
					return false
				}
				uni.navigateTo({
					url: `/pages/confirm-order-form/confirm-order-form?goodsid=${id}&goodstype=mall&mallcount=${this.mallCount}`
				});
			},
			exchange(id){
				if(this.userinfo == {}){
					uni.navigateTo({
						url: `/pages/login/login`,
					})
					return false
				}
				uni.navigateTo({
					url: `/pages/confirm-order-form/confirm-order-form?goodsid=${id}&goodstype=mall&action=credit`
				});
			},
			seckill(id){
				if(this.userinfo == {}){
					uni.navigateTo({
						url: `/pages/login/login`,
					})
					return false
				}
				uni.navigateTo({
					url: `/pages/confirm-order-form/confirm-order-form?goodsid=${id}&goodstype=mall&action=seckill`
				});
			},
			pintuan(id){
				if(this.userinfo == {}){
					uni.navigateTo({
						url: `/pages/login/login`,
					})
					return false
				}
				uni.navigateTo({
					url: `/pages/confirm-order-form/confirm-order-form?goodsid=${id}&goodstype=mall&action=pintuan`
				});
			},
		}
	}
</script>

<style lang="less" scoped>

.share_img{
	width: 100%;
	height: 100vh;
	position: fixed;
	left:0;
	top:0;
	z-index: 999;
	image{
		width:100%;
		height: 100%;
	}
}
// 背景图片
.img {
	swiper {
		width: 750upx;
		height: 560upx;
		display: flex;
		align-items: center;
		justify-content: center;
		image {
			width: 750upx;
			height: 100%;
		}
	}
}


// 商品价格
.commodity {
	padding-top: 26upx;
	background-color: #fff;
	&-price {
		padding: 0 20upx;
		display: flex;
		justify-content: space-between;
		
		&-left {
			text:nth-child(1) {
				font-size: 42upx;
				font-weight: 700;
				color: #ff1e2e;
			}
			text:nth-child(2) {
				font-size: 28upx;
				color: #b0b0b0;
				text-decoration: line-through;
				margin-left: 10upx;
			}
		}
		&-right {
			padding: 0 20upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			border: none;
			background-color: transparent;
			outline: none;
			padding: 0;
			margin: 0;
			image {
				width: 38upx;
				height: 34upx;
			}
			text {
				font-size: 23upx;
				color: #bbb;
				margin-top: 15upx;
			}
		}
		&-right:after{
			border: none;
		}
	}
	&-info {
		display: block;
		padding: 0 20upx;
		font-size: 30upx;
		font-weight: 700;
		color: #121212;
		margin-top: 20upx;
	}
	&-express {
		padding: 0 20upx;
		font-size: 25upx;
		color: #929292;
		margin-top: 15upx;
		display: flex;
		justify-content: space-between;
	}
	&-guige {
		padding: 0 20upx;
		margin-top: 12upx;
		height: 90upx;
		// background-color: orange;
		border-top: 12upx solid #f6f6f6;
		border-bottom: 12upx solid #f6f6f6;
		font-size: 25upx;
		color: #929292;
		line-height: 90upx;
		text:nth-child(2) {
			margin-left: 38upx;
			font-size: 26upx;
			color: #262626;
		}
	}
	&-serve {
		padding: 0 20upx;
		height: 90upx;
		font-size: 25upx;
		color: #929292;
		border-bottom: 12upx solid #f6f6f6;
		display: flex;
		align-items: center;
		&-kf {
			font-size: 25upx;
			color: #929292;
			margin-left: 36upx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			.item {
				display: flex;
				align-items: center;
				image {
					width: 30upx;
					height: 30upx;
					margin-right: 6upx;
				}
			}
			.item:nth-child(2) {
				margin: 0 45upx;
			}
			
		}
	}
	.pintuan {
		padding: 20upx;
		&-top {
			height: 60upx;
			font-size: 30upx;
			color: #999;
			line-height: 60upx;
		}
		&-center {
			margin-top: 30upx;
			display: flex;
			justify-content: center;
			align-items: center;
			image {
				width: 80upx;
				height: 80upx;
				border-radius: 50%;
				margin: 0 4upx;
			}
			.placeholder {
				width: 80upx;
				height: 80upx;
				border-radius: 50%;
				margin: 0 4upx;
				border: 2upx dotted #666;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			
			
		}
		&-minge {
			margin-top: 20upx;
			color: #333;
			display: flex;
			justify-content: center;
		}
		&-bottom {
			margin-top: 40upx;
			button {
				height: 80upx;
				line-height: 80upx;
				background-color: orange;
				color: #fff;
			}
		}
		&-notice {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top:30upx;
			text {
				font-size: 30upx;
				color: #999;
				// margin-top: 30upx;
			}
			text:nth-child(1) {
				color: #333;
			}
		}
	}
}


// 图片信息
.img-info {
	padding-bottom: 150upx;
	image {
		width: 750upx;
		height: 1094upx;
	}
}


.ljgm {
	width: 750upx;
	height: 117upx;
	background-color: #fff;
	padding: 0 20upx;
	box-sizing: border-box;
	position: fixed;
	bottom: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.kefu {
		display: flex;
		flex-direction: column;
		align-items: center;
		border: none;
		background-color: transparent;
		outline: none;
		padding: 0;
		margin: 0;
		image {
			width: 37upx;
			height: 33upx;
		}
		text {
			font-size: 20upx;
			color: #5a5a5a;
		}
	}
	.kefu::after{
		border: none;
	}
	.fenxiang {
		display: flex;
		flex-direction: column;
		align-items: center;
		border: none;
		background-color: transparent;
		outline: none;
		padding: 0;
		margin: 0;
		image {
			width: 30upx;
			height: 30upx;
		}
		text {
			font-size: 20upx;
			color: #5a5a5a;
		}
	}
	.fenxiang::after{
		border: none;
	}
	.shoucang {
		display: flex;
		flex-direction: column;
		align-items: center;
		border: none;
		background-color: transparent;
		outline: none;
		padding: 0;
		margin: 0;
		image {
			width: 34upx;
			height: 34upx;
		}
		text {
			font-size: 20upx;
			color: #ffb71f;
		}
	}
	.shoucang::after{
		border: none;
	}
	.jrgwc {
		display: flex;
		.gouwuche{
			width: 217upx;
			height: 69upx;
			background-color: #fe911d;
			border-radius: 69upx 0 0 69upx;
			text-align: center;
			line-height: 69upx;
			text {
				font-size: 30upx;
				font-weight: 700;
				color: #fff;
			}
		}
		.goumai {
			width: 217upx;
			height: 69upx;
			background-color: #ff402b;
			border-radius: 0 69upx 69upx 0;
			text-align: center;
			line-height: 69upx;
			text {
				font-size: 30upx;
				font-weight: 700;
				color: #fff;
			}
		}
	}
	
}


// 弹出层
.pup {
	width: 100%;
	height: 100vh;
	background-color: rgba(0,0,0,.3);
	position: fixed;
	left: 0;
	top: 0;
}

.popup {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	// background-color: #fff;
	.allcommodity {
		height: 90upx;
		padding: 0 20upx;
		background-color: #fff;
		border-radius: 20upx 20upx 0 0;
		border-bottom: 2upx solid #888;
		display: flex;
		align-items: center;
		justify-content: space-between;
		text {
			font-size: 30upx;
			font-weight: 700;
			color: #0f0f0f;
		}
		image {
			width: 50upx;
		}
	}
	.commoditylist {
		// height: 832upx;
		background-color: #fff;
		&-item {
			padding: 30upx 0;
			border-bottom: 2upx solid #bbb;
			display: flex;
			align-items: center;
			.item-left {
				width: 214upx;
				height: 200upx;
				margin-left: 20upx;
				border-radius: 20upx;
				position: relative;
				image {
					width: 214upx;
					height: 200upx;
					border-radius: 20upx;
				}
				// .paiming {
				// 	width: 50upx;
				// 	height: 40upx;
				// 	background-color: rgba(0,0,0,0.3);
				// 	border-radius: 20upx 0 20upx 0;
				// 	font-size: 30upx;
				// 	color: #fff;
				// 	text-align: center;
				// 	line-height: 40upx;
				// 	position: absolute;
				// 	top: 0;
				// 	left: 0;
				// }
			}
			.item-right {
				margin: 0 20upx;
				flex: 1;
				height: 180upx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				text {
					font-size: 30upx;
					color: #181818;
				}
				.goumai {
					display: flex;
					justify-content: space-between;
					text:nth-child(1) {
						font-size: 38upx;
						color: #ff1e2e;
					}
					text:nth-child(2) {
						width: 150upx;
						height: 50upx;
						font-size: 28upx;
						background-image: linear-gradient(90deg, #4497ff, #3e5fff);
						text-align: center;
						line-height: 50upx;
						color: #fff;
						border-radius: 25upx;
					}
				}
			}
		}
		
	}
	.guige {
		background-color: #fff;
		padding: 30upx 20upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		text {
			font-size: 30upx;
			color: #333;
		}
	}
	.shuliang {
		background-color: #fff;
		padding: 30upx 20upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		&-left {
			text {
				font-size: 30upx;
				color: #333;
			}
		}
		&-right {
			display: flex;
			align-items: center;
			text {
				width: 40upx;
				height: 40upx;
				background-color: #f5f5f5;
				text-align: center;
				line-height: 40upx;
				font-size: 20upx;
			}
			text:nth-child(2) {
				margin: 0 4upx;
			}
		}
	}
	.comfirm {
		background-color: #fff;
		padding: 30upx 20upx;
		button {
			background-color: orange;
			color: #fff;
			letter-spacing: 4upx;
		}
	}
}


</style>
